// 景点数据
const landscapes = [
    {
        id: 1,
        name: '黄山',
        category: 'mountain',
        location: '安徽省黄山市',
        description: '黄山以奇松、怪石、云海、温泉"四绝"著称，是中国十大名山之一。',
        image: 'images/huangshan.jpg'
    },
    {
        id: 2,
        name: '西湖',
        category: 'water',
        location: '浙江省杭州市',
        description: '西湖以其秀丽的湖光山色和众多的人文景观闻名于世。',
        image: 'images/xihu.jpg'
    },
    {
        id: 3,
        name: '长城',
        category: 'culture',
        location: '北京市',
        description: '万里长城是中国古代伟大的防御工程，也是世界文化遗产。',
        image: 'images/greatwall.jpg'
    }
    // 更多景点数据...
];

// 轮播图数据
const carouselData = [
    {
        id: 1,
        image: 'images/huangshan.jpg',
        title: '黄山云海',
        description: '云海翻腾，壮观迷人'
    },
    {
        id: 2,
        image: 'images/carousel/zhangjiajie.jpg',
        title: '张家界',
        description: '峰林耸立，气势磅礴'
    },
    {
        id: 3,
        image: 'images/carousel/guilin.jpg',
        title: '桂林山水',
        description: '山水如画，诗意江南'
    }
];

// DOM 元素
const galleryGrid = document.getElementById('galleryGrid');
const filterButtons = document.querySelectorAll('.filter-btn');
const searchInput = document.getElementById('searchInput');

// 轮播图类
class Carousel {
    constructor(container) {
        this.container = container;
        this.track = container.querySelector('.carousel-track');
        this.slides = Array.from(this.track.children);
        this.nextButton = container.querySelector('.carousel-button.next');
        this.prevButton = container.querySelector('.carousel-button.prev');
        this.dotsContainer = container.querySelector('.carousel-dots');
        
        this.currentSlide = 0;
        this.slideWidth = this.slides[0].getBoundingClientRect().width;
        this.autoPlayInterval = null;
        this.touchStartX = 0;
        this.touchEndX = 0;

        this.init();
    }

    init() {
        // 创建导航点
        this.createDots();
        
        // 设置初始位置
        this.updateSlidePosition();
        
        // 添加事件监听
        this.nextButton.addEventListener('click', () => this.moveToSlide('next'));
        this.prevButton.addEventListener('click', () => this.moveToSlide('prev'));
        this.dotsContainer.addEventListener('click', e => {
            if (e.target.classList.contains('dot')) {
                const targetIndex = Array.from(this.dotsContainer.children).indexOf(e.target);
                this.moveToSlide(targetIndex);
                this.updateDots(targetIndex);
            }
        });

        // 触摸事件
        this.track.addEventListener('touchstart', e => {
            this.touchStartX = e.touches[0].clientX;
            this.pauseAutoPlay();
        });

        this.track.addEventListener('touchmove', e => {
            this.touchEndX = e.touches[0].clientX;
            const diff = this.touchStartX - this.touchEndX;
            this.track.style.transform = `translateX(${-this.currentSlide * this.slideWidth - diff}px)`;
        });

        this.track.addEventListener('touchend', () => {
            const diff = this.touchStartX - this.touchEndX;
            if (Math.abs(diff) > 100) {
                if (diff > 0) {
                    this.moveToSlide('next');
                } else {
                    this.moveToSlide('prev');
                }
            } else {
                this.updateSlidePosition();
            }
            this.startAutoPlay();
        });

        // 自动播放
        this.startAutoPlay();

        // 鼠标悬停时暂停自动播放
        this.container.addEventListener('mouseenter', () => this.pauseAutoPlay());
        this.container.addEventListener('mouseleave', () => this.startAutoPlay());
    }

    createDots() {
        this.slides.forEach((_, index) => {
            const dot = document.createElement('div');
            dot.classList.add('dot');
            if (index === 0) dot.classList.add('active');
            this.dotsContainer.appendChild(dot);
        });
    }

    updateDots(index) {
        const dots = this.dotsContainer.children;
        Array.from(dots).forEach(dot => dot.classList.remove('active'));
        dots[index].classList.add('active');
    }

    moveToSlide(target) {
        const slidesLength = this.slides.length;
        if (target === 'next') {
            this.currentSlide = (this.currentSlide + 1) % slidesLength;
        } else if (target === 'prev') {
            this.currentSlide = (this.currentSlide - 1 + slidesLength) % slidesLength;
        } else {
            this.currentSlide = target;
        }
        
        this.updateSlidePosition();
        this.updateDots(this.currentSlide);
    }

    updateSlidePosition() {
        this.track.style.transform = `translateX(-${this.currentSlide * this.slideWidth}px)`;
    }

    startAutoPlay() {
        this.autoPlayInterval = setInterval(() => {
            this.moveToSlide('next');
        }, 5000);
    }

    pauseAutoPlay() {
        clearInterval(this.autoPlayInterval);
    }
}

// 初始化函数
function init() {
    // 初始化轮播图
    const carouselContainer = document.querySelector('.carousel-container');
    if (carouselContainer) {
        // 添加轮播图内容
        const carouselTrack = carouselContainer.querySelector('.carousel-track');
        carouselTrack.innerHTML = carouselData.map(slide => `
            <div class="carousel-slide">
                <img src="${slide.image}" alt="${slide.title}">
                <div class="slide-content">
                    <h2>${slide.title}</h2>
                    <p>${slide.description}</p>
                </div>
            </div>
        `).join('');

        // 初始化轮播图
        new Carousel(carouselContainer);
    }

    loadGallery('all');
    setupEventListeners();
    initMap();
    initParallax();
}

// 加载画廊
function loadGallery(filter) {
    galleryGrid.innerHTML = '';
    const filteredLandscapes = landscapes.filter(item => 
        filter === 'all' || item.category === filter
    );

    filteredLandscapes.forEach(item => {
        const galleryItem = createGalleryItem(item);
        galleryGrid.appendChild(galleryItem);
    });
}

// 创建画廊项
function createGalleryItem(item) {
    const div = document.createElement('div');
    div.className = 'gallery-item';
    div.innerHTML = `
        <a href="detail.html?id=${item.id}" class="gallery-item-link">
            <img src="${item.image}" alt="${item.name}" loading="lazy">
            <div class="gallery-item-info">
                <h3>${item.name}</h3>
                <p>${item.location}</p>
                <p class="gallery-item-description">${item.description}</p>
                <span class="view-details">查看详情 <i class="fas fa-arrow-right"></i></span>
            </div>
        </a>
    `;
    
    // 添加鼠标悬停效果
    div.addEventListener('mouseenter', () => {
        const img = div.querySelector('img');
        img.style.transform = 'scale(1.1)';
    });
    
    div.addEventListener('mouseleave', () => {
        const img = div.querySelector('img');
        img.style.transform = 'scale(1)';
    });

    return div;
}

// 设置事件监听器
function setupEventListeners() {
    // 筛选按钮事件
    filterButtons.forEach(btn => {
        btn.addEventListener('click', () => {
            filterButtons.forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
            loadGallery(btn.dataset.filter);
        });
    });

    // 搜索功能
    searchInput.addEventListener('input', debounce(function() {
        const searchTerm = this.value.toLowerCase();
        const items = document.querySelectorAll('.gallery-item');
        
        items.forEach(item => {
            const text = item.textContent.toLowerCase();
            item.style.display = text.includes(searchTerm) ? 'block' : 'none';
        });
    }, 300));

    // 滚动动画
    window.addEventListener('scroll', () => {
        const scrolled = window.scrollY;
        document.querySelector('.parallax-container').style.transform = 
            `translateY(${scrolled * 0.5}px)`;
    });
}

// 初始化地图
function initMap() {
    // 这里可以集成百度地图或高德地图 API
    console.log('Map initialization will be implemented');
}

// 初始化视差效果
function initParallax() {
    const parallaxContainer = document.querySelector('.parallax-container');
    window.addEventListener('scroll', () => {
        const scrolled = window.scrollY;
        parallaxContainer.style.transform = `translateY(${scrolled * 0.5}px)`;
        parallaxContainer.style.opacity = 1 - (scrolled * 0.003);
    });
}

// 工具函数：防抖
function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func.apply(this, args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', init); 